<template>
    <view class="container">
        <view class="calendar">
            <uni-calendar :insert="true" :lunar="true" @change="change" />
        </view>
        <view class="memory-list">
            <!-- 显示纪念日和倒计时 -->
            <view class="memory-item" v-for="(item, index) in days" :key="index">
                <view class="memory-item-type">{{ item.memoryDay ? "纪念日" : "倒计时" }}</view>
                <view class="memory-item-date">{{ item.type == 0 ? "公历: " : "农历: " }} {{ item.targetTime  + "始"}}</view>
                <view class="memory-item-title">{{ item.title }}</view>
            </view>
        </view>
    </view>

</template>

<script setup lang="ts">
import { memoryDayListByDate } from '@/api/memoryDay/memoryDay';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue'
import { Lunar } from 'lunar-javascript'; // 假设库提供了这样的导入方式
const lunar = ref<string>(null);
const calendar = ref<string>(null);
// 日历相关
let change = (param) => {
    calendar.value = param.fulldate;
    lunar.value = `${param.lunar.lYear}-${String(param.lunar.lMonth).padStart(2, '0')}-${String(param.lunar.lDay).padStart(2, '0')}`
    init();
}
// TODO 基于日期查询
interface AllDayVo {
    memoryDay?: boolean;
    id?: number;
    type?: number;
    title?: string;
    targetTime?: string; // 对应 Java 的 LocalDateTime 类型
}

let days = ref<AllDayVo[]>()
const init = async () => {
    // 默认获取当天的公历, 和其对应的农历
    const res = await memoryDayListByDate(calendar.value, lunar.value)
    console.log("dataRes: ", res);
    days.value = res.data;
}
onShow(() => {
    // 假设你有两个变量来存储这些值
    calendar.value = getGregorianDate();
    lunar.value = getLunarDate();
    init();
})
// 获取公历日期
const getGregorianDate = (): string => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

// 获取农历日期
const getLunarDate = (): string => {
    const now = new Date();
    const lunar = Lunar.fromDate(now);
    const year = lunar.getYear();
    const month = String(lunar.getMonth()).padStart(2, '0');
    const day = String(lunar.getDay()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 98vh;
    padding: 1vh 20px;
    overflow-y: hidden;
    /* 允许垂直滚动 */
    overflow-x: hidden;
    /* 允许垂直滚动 */
}

/* 日历容器样式 */
.calendar {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* 纪念日列表容器样式 */
.memory-list {
    margin-top: 10px;
    padding: 10px;
    width: 96%;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* 每个纪念日项目的样式 */
.memory-item {
    position: relative;
    margin-bottom: 10px;
    padding: 5px;
    height: 100px;
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 新增的阴影效果，可以根据需要调整参数 */
}

/* 纪念日类型的样式 */
.memory-item-type {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* 纪念日日期的样式 */
.memory-item-date {
    position: absolute;
    left: 70px;
    top: 5px;
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* 纪念日标题的样式 */
.memory-item-title {
    position: absolute;
    left: 20px;
    top: 40px;
    font-size: 16px;
    font-weight: bold;
    color: #007aff;
    margin-top: 5px;
}
</style>